<template>
	<view class="mainpadding mainbgc">
		<view class="neirong">
			<view class="flexbetween mainpadding ffffff radius">
				<view class="ershib">公司名称</view>
				<input class="inputs textright" type="text" placeholder="请输入公司名称" v-model="shop_name">
			</view>
			<view class="flexbetween mainpadding ffffff radius" @click="qyflshow=true">
				<view class="ershib">企业分类</view>
				<view class="flexright">
					<input class="inputs textright margin_right" type="text" placeholder="请选择分类" disabled=""
						v-model="qyflname">
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="ershib">经营地址</view>
				<view class="flexright">
					<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="请选择经营地址"
						popup-title="请选择经营地址" v-model="area" class="margin_right">
						<text class="inputs1" v-if="!area.length" style="color: #999999;">请选择经营地址</text>
						<text class="inputs1" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					</uni-data-picker>
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="mainpadding ffffff margin_top">
				<view class="guanwang">详细地址</view>
				<view class="http">
					<textarea type="text" placeholder="请输入公司的详细地址" class="margin_top"
						v-model="addressdetail"></textarea>
				</view>
			</view>
			<!-- 新增两个地址 -->
		<!-- 	<view class="mainpadding ffffff margin_top">
				<view class="guanwang">注册地址</view>
				<view class="http">
					<textarea type="text" placeholder="请输入公司的注册地址" class="margin_top"
						v-model="addressdetail"></textarea>
				</view>
			</view>
			<view class="mainpadding ffffff margin_top">
				<view class="guanwang">经营地址</view>
				<view class="http">
					<textarea type="text" placeholder="请输入公司的经营地址" class="margin_top"
						v-model="addressdetail"></textarea>
				</view>
			</view> -->
			<!-- <view class="mainpadding ffffff margin_top">
				<view class="guanwang">公司官网（选填）</view>
				<view class="http">
					<textarea type="text" placeholder="请输入公司的官方地址" class="margin_top" v-model="shop_url"></textarea>
				</view>
			</view>
			<view class="mainpadding ffffff margin_top">
				<view class="guanwang">公司主营</view>
				<view class="http">
					<textarea type="text" placeholder="请输入公司的主营业务" class="margin_top" v-model="zyyw"></textarea>
				</view>
			</view>
			<view class="mainpadding ffffff margin_top">
				<view class="guanwang">公司简介</view>
				<view class="http">
					<textarea type="text" placeholder="请输入公司简介" class="margin_top" v-model="gsjj"></textarea>
				</view>
			</view> -->
			<!-- 专线 -->
			<view class="center_a ">
				<view class="center_gray">
					<view class="flexbetween ffffff zhuan">
						<view class="text_weight ">联系人</view>
						<view class="flexleft ">
							<view class="tian word_grey" @click="tianjia">添加</view>
							<view class="right_icon"></view>
						</view>
					</view>
					<view class="hh" v-for="(item,index) in lxr_data" :key="index">
						<view class="center_nav flexbetween">
							<view>
								<input type="text" class="grey" placeholder="联系人姓名" v-model="item.name">
								<input type="text" class="grey_num" placeholder="联系人电话" v-model="item.mobile">
							</view>
							<view class="del" @click.stop="dellxr(index)"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="ershib">法人姓名</view>
				<input class="inputs textright" type="text" placeholder="请输入法人姓名" v-model="fr_name">
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="ershib">法人身份证号</view>
				<input class="inputs textright" type="text" placeholder="请输入法人身份证号" v-model="fr_idcard">
			</view>
			<!-- <view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="ershib">座机</view>
				<input class="inputs textright" type="text" placeholder="请输入座机号码" v-model="zj">
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="ershib">邮箱</view>
				<input class="inputs textright" type="text" placeholder="请输入邮箱" v-model="email">
			</view> -->
			<!-- 营业照 -->
			<view class="yyz margin_top" @click="uploadImg(1)">
				<image v-if="!yyzz_image" src="/static/images/system/ID_one.png" mode=""></image>
				<image v-if="yyzz_image" :src="yyzz_image" mode=""></image>
			</view>
			<!-- 身份证 -->
			<!-- <view class="flexbetween margin_top">
				<view class="shefz" @click="uploadImg(2)">
					<image v-if="!fr_zimage" src="/static/images/system/ID_two.png" mode=""></image>
					<image v-if="fr_zimage" :src="fr_zimage" mode=""></image>
				</view>
				<view class="shefz" @click="uploadImg(3)">
					<image v-if="!fr_fimage" src="/static/images/system/ID_three.png" mode=""></image>
					<image v-if="fr_fimage" :src="fr_fimage" mode=""></image>
				</view>
			</view> -->
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb" @click="submit">
			<view class="bigbtn">提交审核</view>
			<!-- 提交审核之后显示的按钮 -->
			<!-- <view class="bigbtn" @click="tzshz">查看详情</view> -->
		</view>
		<qiyeflpicker :messageInfo="{qyflshow:qyflshow}" @sureqyfl="sureqyfl"></qiyeflpicker>
		<u-popup :show="qyflshow" :round="10" mode="bottom" @close="qyflshow=false">
			<view class="mainpadding">
				<view class="form flexcenter">企业分类</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<view class=" flexleft flex_wrap mainpadding2">
						<view :class="item.ischeck?'lan':'pu'" v-for="item in qyflcloms" :key="item.id"
							@click="qyflchange(item)">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "../../static/city/city.js"
	export default {
		data() {
			return {
				//企业分类开始
				qyflshow: false,
				qyflcloms: [],
				qyflid: [],
				qyflname: "",
				//企业分类结束
				area: [], //收获地址
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				items: citys.data,
				addressdetail: "",
				fr_name: "",
				// shop_url: "",
				fr_idcard: "",
				// gsjj: "",
				// zyyw: "",
				shop_name: "",
				yyzz_image: "", //营业执照
				fr_zimage: "", //法人头像面
				fr_fimage: "", //法人国徽面
				lxr_data: [{
					name: "",
					mobile: "",
				}],
				zj:"",
				email:"",

			}
		},
		onLoad() {
			this.getinfo()

		},
		methods: {
			init() {
				httpRequest.request('/api/Company/shopItem', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.qyflid.forEach(item => {
							res.data.forEach(ite => {
								if (item == ite.id) {
									this.$set(ite, "ischeck", true)
								} else {
									this.$set(ite, "ischeck", false)
								}
							})
						})
						this.qyflcloms = res.data
					}
				})
			},
			sureqyfl(e) {
				this.qyfl = e
			},
			tianjia() {
				this.lxr_data.push({
					name: '',
					mobile: '',
				})
			},
			dellxr(index) {
				if (this.lxr_data.length == 1) {
					httpRequest.toast("请至少填写一个联系人")
					return false
				}
				this.lxr_data.splice(index, 1)
			},
			getinfo() {
				httpRequest.request('/api/user/index', 'POST', {}, false, false, true).then(res => {
					if (res.code == 1) {
						if (res.data.shop_apply) {
							this.shop_name = res.data.shop_apply.shop_name
							this.address.province = res.data.shop_apply.province_id
							this.address.city = res.data.shop_apply.city_id
							this.address.county = res.data.shop_apply.area_id
							this.addressdetail = res.data.shop_apply.address
							this.fr_name = res.data.shop_apply.fr_name
							this.fr_idcard = res.data.shop_apply.fr_idcard
							this.yyzz_image = res.data.shop_apply.yyzz_image_text
							this.fr_zimage = res.data.shop_apply.fr_zimage_text
							this.fr_fimage = res.data.shop_apply.fr_fimage_text
							this.area = res.data.shop_apply.cityinfo.split('/')
							// this.shop_url = res.data.shop_apply.shop_url
							this.lxr_data = res.data.shop_apply.shop_apply_lxr
							this.qyflname = res.data.shop_apply.shop_item_text
							this.qyflid = res.data.shop_apply.shop_item_ids.split(",")
							// this.zyyw = res.data.shop_apply.zyyw
							this.zj = res.data.shop_apply.zj
							this.email = res.data.shop_apply.email
							// this.gsjj = res.data.shop_apply.gsjj
						}
						this.init()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			submit() {
				let _this = this
				let flag = false
				let nameflag = false
				if (_this.shop_name == "") {
					httpRequest.toast("请输入企业名称")
					return
				}
				if (_this.area.length == 0) {
					httpRequest.toast("请选择企业地址")
					return
				}
				if (_this.addressdetail == "") {
					httpRequest.toast("请输入企业详细地址")
					return
				}
				// if (_this.zyyw == "") {
				// 	httpRequest.toast("请输入公司主营项目")
				// 	return
				// }
				// if (_this.gsjj == "") {
				// 	httpRequest.toast("请输入公司简介")
				// 	return
				// }
				this.lxr_data.forEach(item => {
					if (item.name == "") {
						nameflag = true
					}
					if (!item.mobile.match(/^1\d{10}$/)) {
						flag = true
					}
				})
				if (nameflag) {
					httpRequest.toast("请输入联系人");
					return false;
				}
				if (flag) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				// if (_this.fr_name == "") {
				// 	httpRequest.toast("请输入法人名称")
				// 	return
				// }
				// if (_this.fr_idcard == "") {
				// 	httpRequest.toast("请输入法人身份证号")
				// 	return
				// }
				if (_this.fr_idcard != "") {
					let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
					if (reg.test(_this.fr_idcard) === false) {
						httpRequest.toast("请输入正确的法人身份证号")
						return
					}
				}
				
				// if(this.zj != ""){
				// 	let isMob = /^((0\d{2,3}))?(\d{7,8})$/; // 固话正则
				// 	if (!isMob.test(this.zj)) {
				// 		httpRequest.toast("座机号码格式错误")
				// 		return false
				// 	}
				// }
				
				if (this.email != "") {
					let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
					if (!reg.test(this.email)) {
						httpRequest.toast("请输入有效的邮箱");
						return false;
					}
				}
				if (_this.yyzz_image == "") {
					httpRequest.toast("请上传营业执照")
					return
				}
				// if (_this.fr_zimage == "") {
				// 	httpRequest.toast("请上传身份证头像面")
				// 	return
				// }
				// if (_this.fr_fimage == "") {
				// 	httpRequest.toast("请上传身份证国徽面")
				// 	return
				// }
				httpRequest.modal('提示', '确定提交审核吗？', true, (res) => {
					if (res) {
						uni.showLoading({
							title: '请稍候...',
							mask: true
						})
						httpRequest.request('/api/user/shopApply', 'POST', {
							// 传参
							shop_name: _this.shop_name,
							province_id: _this.address.province,
							city_id: _this.address.city,
							area_id: _this.address.county,
							address: _this.addressdetail,
							fr_idcard: _this.fr_idcard,
							fr_name: _this.fr_name,
							yyzz_image: _this.yyzz_image,
							fr_zimage: _this.fr_zimage,
							fr_fimage: _this.fr_fimage,
							// zyyw: this.zyyw,
							// shop_url: this.shop_url,
							// gsjj: this.gsjj,
							shop_item_ids: this.qyflid.join(),
							lxr_data: this.lxr_data,
							zj: this.zj,
							email: this.email
						}, false, false, true).then(res => {
							uni.hideLoading()
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								setTimeout(() => {
									uni.navigateBack(2)
								}, 500)
							}
						}).catch(err => {
							uni.hideLoading()
							httpRequest.toast(err.msg);
						})
					}
				})

			},
			uploadImg(upimg) {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
					 
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upimg)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									 
									_this.uploadImageService(res[i], upimg)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url, upimg) {
				let _this = this;
				httpRequest.uploadFile('/api/Common/upload', url).then(res => {
					let image_item = res.fullurl;
					if (upimg == 1) {
						this.yyzz_image = image_item
					} else if (upimg == 2) {
						this.fr_zimage = image_item
					} else {
						this.fr_fimage = image_item
					}
				}).catch(err => {});
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.address.province = area[0].value;
				this.address.city = area[1].value;
				this.address.county = area[2].value;
			},
			/* 	// 跳转审核状态页面
				tzshz() {
					uni.navigateTo({
						url: '/pages/mypage/shenhe'
					})
				}, */
			qyflchange(item) {
				item.ischeck = !item.ischeck
				let arr = []
				this.qyflcloms.forEach(item => {
					if (item.ischeck) {
						arr.push(item.name)
						this.qyflid.push(item.id)
					}
				})
				this.qyflname = arr.join()
			}
		}
	}

</script>

<style lang="scss" scoped>
	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin: 30rpx 10rpx 0 0;
		width: 200rpx;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		margin: 30rpx 10rpx 0 0;
		width: 200rpx;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.scroll-Y {
		height: 500rpx;
	}

	.right_icon {
		margin-left: 8rpx;
	}

	.neirong {
		padding-bottom: 200rpx;
	}

	.shefz {
		width: 48%;
		height: 291rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yyz {
		width: 100%;
		height: 291rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.inputs {
		width: 60%;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.zdy {
		font-size: 30rpx;
		width: 100%;
	}

	/deep/.selected-item-active {
		border-bottom: 2px solid #ffc059;
	}

	.grey {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		width: 300rpx;
	}

	.grey_num {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-top: 11rpx;
		width: 300rpx;
	}

	.center_a {
		margin-top: 30rpx;
		padding: 30rpx 30rpx;
		margin-top: 30rpx 0rpx 0rpx 0rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.del {
		margin: 0rpx 13rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.zhuan {
		padding-bottom: 30rpx;
	}

	.tian {
		padding-right: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.center_nav {
		padding: 30rpx 30rpx 30rpx 30rpx;
	}

	.hh {
		border-bottom: 1rpx RGBA(247, 247, 247, 1) solid;
	}

	.center_gray {
		background-color: #fafafa;
	}

</style>

